<template>
  <w-leaf :text="data.text" :key="data.id" :src="src" :data="data">
    <x-leaf v-for="item in children" :key="item.id" :data="item"></x-leaf>
  </w-leaf>
</template>
<script>
  let index = 0
  export default {
    name: 'x-leaf',
    props: ['data'],
    data() {
      return {
        resChildren: null
      }
    },
    computed: {
      src() {
        //return () => $.ajax.get($.urlParam('/getdata.php', {id: this.data.id})).then(res => this.resChildren = res)
        //在API环境下用下面的方法模拟获取远端数据；实际开发中应使用类似上面注释的语句
        if (this.$parent.level > 0) return null
        return () => new Promise(resolve => {
          setTimeout(() => resolve([{id: ++index, text: '子节点' + index}, {id: ++index, text: '子节点' + index}]), 300)
        }).then(res => this.resChildren = res)
      },
      children() {
        return this.resChildren || this.data.children
      }
    }
  }
</script>

